<template>
	<div class="kp-train train">
		<div class="train_swiper">
			<swiper :options="swiperOptionbanner">
				<swiper-slide v-for="item,key in banner.list" v-if="banner.list.length" :key="key">
					<img :src="banner.imageUrl + item.coverPicture" alt="" />
				</swiper-slide>
				<swiper-slide v-else> 
					<img src="../../../assets/banner.jpg" alt="" />
				</swiper-slide>
			</swiper>
		</div>
		<div class="train_content">
			<div class="train_serch">
				<div class="train_city">
					<div class="train_depar tc">
						<p class="train_cf">出发站</p>
						<router-link :to="'/train/city?cityName=' + fromCity + '&isFrom=1'">
							<p class="train_station font_spill" v-if="fromCity">{{fromCity}}</p>
							<p class="train_station font_spill" style="color:#A8A8A8" v-else>请选择出发站</p>
						</router-link>
					</div>
					<div class="train_icon" @click="changeCity" :style="{'transform':'rotate('+ 180 * rotateNum +'deg)'}"></div>
					<!--<div class="train_icon" v-tap="[changeCity]":style="{'transform':'rotate('+ 180 * rotateNum +'deg)'}"></div>-->
					<div class="train_arr tc">
						<p class="train_cf">到达站</p>
						<router-link :to="'/train/city?cityName=' + toCity + '&isFrom=0'">
							<p class="train_station font_spill" v-if="toCity">{{toCity}}</p>
							<p class="train_station font_spill" style="color:#A8A8A8" v-else>请选择到达站</p>
						</router-link>
					</div>
				</div>
				<div class="train_time">
					<router-link :to="'/train/date?departureDate=' + departureDate">
						<span class="train_departime">出发时间</span>
						<span class="train_date">
						<span class="train_dat">{{dateMsg.day}}</span>
						<span class="train_day" v-if="dateMsg.isToday">今天</span>
						<span class="train_day" v-else-if="dateMsg.isTomorrow">明天</span>
						<span class="train_day" v-else-if="dateMsg.isYesterday">后天</span>
						<span class="train_day" v-else>{{dateMsg.week}}</span>
						</span>
					</router-link>
				</div>
				<div class="train_gt tr">
					<span v-if="!studentTicketFlag"></span><!--学生票判断-->
					<span class="train_rail" @click="changeStudent" v-else><em class="train_railem" :class="{'active':studentFlag}"></em>学生票</span>
					<span class="train_rail" @click="changeHighspeed"><em class="train_railem" :class="{'active':Highspeed}"></em>高铁动车</span>
				</div>
				<div class="train_submit" @click="search">
					<div class="train_suba tc">开始搜索</div>
				</div>
				<div class="train_city_history" v-if="trainCityHistory.length">
					<div class="train_city_historyList">
						<div v-for="item in trainCityHistory" @click="historySearch(item)">
							<span>{{item.fromCity}} — {{item.toCity}}</span>
						</div>
					</div>
					<div @click="clearHistory" class="train_clearHistory">清除全部</div>
				</div>
			</div>
		</div>
		<div class="train_tis">
			<div class="train_tisc">学生票可售日期为：6月1日-9月30日，12月1日-3月31日，且只支持硬座/硬卧/二等座/无座，实际价格以占座成功后票价为准</div>
		</div>
		<!--<div class="train_ul">
			<ul class="wccy-after">
				<li class="train_item">
					<p class="train_iconq train_hotel"></p>
					<p class="train_name">酒店</p>
				</li>
				<li class="train_item">
					<p class="train_iconq train_scenic"></p>
					<p class="train_name">景点</p>
				</li>
				<li class="train_item">
					<p class="train_iconq train_car"></p>
					<p class="train_name">汽车</p>
				</li>
				<li class="train_item">
					<p class="train_iconq train_movie"></p>
					<p class="train_name">电影</p>
				</li>
			</ul>
		</div>-->
	</div>
</template>

<script>
	import { swiper, swiperSlide } from 'vue-awesome-swiper';
	export default {
		data() {
			return {
				swiperOptionbanner: {   
					notNextTick: true,
					autoplay: 3000,
					setWrapperSize: true,
					autoHeight: true,
					observeParents: true,
					loop: true,
					loopedSlides: 1,
					slidesPerView: 1,
					pagination: {
						el: '.swiper-pagination',
						clickable: true,
						paginationClickable: false,
						paginationType: 'custom',
					}  
				},
				banner:{//轮播图
					list:[],
					imageUrl:"",
				},
				fromCity: "", //起点
				toCity: "", //终点
				departureDate: "", //日期
				dateMsg: {}, //日期信息
				Highspeed: false,//高铁动车
				studentFlag:false,//学生票
				trainCityHistory:[{
					fromCity:"石家庄",
					toCity:"北京"
				},{
					fromCity:"上海",
					toCity:"北京"
				}],
				rotateNum:0,
				studentTicketFlag:false,//学生售票期间
				isMapShow:false,
			}
		},
		mounted() { //载入后执行
			this.fromCity = this.$store.state.train.trainStore.fromCityName || ""; //城市
			this.toCity = this.$store.state.train.trainStore.toCityName || ""; //城市
			this.Highspeed = this.$store.state.train.trainStore.Highspeed || false; //高铁动车
			this.studentFlag = this.$store.state.train.trainStore.studentFlag || false; //学生
			this.departureDate = this.$store.state.train.trainStore.departureDate || new Date().format("yyyy-MM-dd"); //日期
			this.studentTicketFlag = this.getStudentTicketFlag();//学生售票期间
			this.advanceBook(); //预售	
			this.getInsurance();//保险
			var trainCityHistory = this.$store.state.train.trainStorage.trainCityHistory;//历史
			this.trainCityHistory = trainCityHistory ? JSON.parse(JSON.stringify(trainCityHistory)) : [];
		},
		created() { //创建后	
			this.getBanner();//轮播图
			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			};
			var code = getQueryString("code");
			if (code) {
				var param = '{"code":"' + code + '","ex":""}';
				this.$http.post(this.$baseUrl.baseurl + 'kpcx/wx/getUserInfo', param).then((res) => {
					if (res.data.Code == "0") {
						this.openid = res.data.Result.userInfo.openid;
						localStorage.setItem('openid', this.openid);
					};
				})
			} else {
				var ua = navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
				var url = encodeURIComponent(this.$baseUrl.domainName);
				window.location.href =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx348ec18fec6bf757&redirect_uri=' +
					url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
				}
			};
		},
		watch: { //监听放置
			departureDate() {
				this.dateMsg = this.$publicMethod.getWeek(this.departureDate);
			},
			fromCity(){
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.fromCityName = this.fromCity; //城市
				this.$store.commit('TRAINSTORE', trainStore);
			},
			toCity(){
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.toCityName = this.toCity;
				this.$store.commit('TRAINSTORE', trainStore);
			},
		},
		methods: { //方法放置
			getBanner(){//获取轮播图
				var param = {type:"3"};
				this.$http.post(this.$baseUrl.baseurls + "carouse/homePageBanner", param).then((res) => {
					this.banner.list = res.data.Result.figureList || [];
					this.banner.imageUrl = res.data.Result.image_url;
				}).catch((err) => {
					console.log(err);
				});
			},
			search() {
				var str = this.fromCity ? (this.toCity ? "" : "请选择到达城市") : "请选择出发城市";
				if (str) {
					this.$alert(str, {
						title: '提示',
						yes: {},
					});
				} else {
					var obj = {
						fromCity:this.fromCity,
						toCity:this.toCity,
					};
					Array.isArray(this.trainCityHistory) || (this.trainCityHistory = []);
					this.trainCityHistory.unshift(obj);
					this.getRepeat(this.trainCityHistory);
					(this.trainCityHistory.length > 3) && (this.trainCityHistory.length = 3);
					var trainStorage = JSON.parse(JSON.stringify(this.$store.state.train.trainStorage));
					trainStorage.trainCityHistory = this.trainCityHistory;
					this.$store.commit('TRAINSTORAGE', trainStorage);
					this.$router.push({
						name: 'trainList',
						query: {
							fromCity: this.fromCity,
							toCity: this.toCity,
							departureDate: this.departureDate,
							Highspeed:Number(this.Highspeed),
							studentFlag:Number(this.studentFlag)
						},
					});
				}
			},
			historySearch(item){
				this.fromCity = item.fromCity;
				this.toCity = item.toCity;
				this.search();
			},
			changeCity() {
				var fromCity = this.fromCity;
				this.fromCity = this.toCity;
				this.toCity = fromCity;
				this.rotateNum ++;
			},
			advanceBook() { //预售查询
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainAdvanceTime", {}).then((res) => {
					var data = res.data.Result;
					var dayNum = Number(data.trainAdvanceDays) + Number(data.trainQPvanceDays);
					//替换@
					data.trainGQTips = data.trainGQTips.replace(/@/g, data.trainAdvanceDays);
					data.trainTips = data.trainTips.replace(/@/g, data.trainQPvanceDays);
					//存全局
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					trainStore.advanceDate = data;
					trainStore.advanceDate.dayNum = dayNum;
					trainStore.advanceDate.date = data.trainQPAdvanceTime;
					trainStore.advanceDate.dateChange = data.advanceTime;
					this.$store.commit('TRAINSTORE', trainStore);
				}).catch((err) => {
					console.log(err);
				});
			},
			getInsurance() { //获取保险开关
				this.$http.post(this.$baseUrl.baseurl + "kpcx/switch/getAllSwitch", {
					"switch": "All",
				}).then((res) => {
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					trainStore.insuranceFlag = res.data.Result.activityInfo.Insure; //存到全局(0关1开)
					trainStore.HCCashBackFlag = res.data.Result.activityInfo.HCCashBack; //返现
					this.$store.commit('TRAINSTORE', trainStore); 
				}).catch((err) => {
					console.log(err);
				});
			},
			changeHighspeed(){
				this.Highspeed = !this.Highspeed;
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.Highspeed = this.Highspeed;
				this.$store.commit('TRAINSTORE', trainStore); 
			},
			changeStudent(){
				this.studentFlag = !this.studentFlag;
				var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
				trainStore.studentFlag = this.studentFlag;
				this.$store.commit('TRAINSTORE', trainStore); 
			},
			clearHistory(){
				this.trainCityHistory.length = 0;
				this.$forceUpdate();
				var trainStorage = JSON.parse(JSON.stringify(this.$store.state.train.trainStorage));
				trainStorage.trainCityHistory = null;
				this.$store.commit('TRAINSTORAGE', trainStorage);
			},
		  	getRepeat(arr) {//去重
			    for (var i = 0; i < arr.length; i++) {
			      for (var j = i + 1; j < arr.length; j++) {
			        if ((arr[i].fromCity == arr[j].fromCity) && (arr[i].toCity == arr[j].toCity)) {
			          arr.splice(j, 1);
			          j--;
			        };
			      };
			    };
		  	},
		  	getStudentTicketFlag() { //学生票售票日期区间
				var year = new Date(this.departureDate.replace(/-/g, '/')).getFullYear();
				var lastYear = year - 1; //去年
				var nextYear = year + 1; //今年
				return(this.$publicMethod.isDateBetween(this.departureDate, year + ".6.1", year + ".9.30")) || (this.$publicMethod.isDateBetween(this.departureDate, lastYear + ".12.1", year + ".3.31")) ||
					(this.$publicMethod.isDateBetween(this.departureDate, year + ".12.1", nextYear + ".3.31"));
			},
		},
		components: {
			swiper,
			swiperSlide,
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}
	
	.kp-train {
		background: #f4f5f9;
		height: 100vh;
	}
	
	.train_swiper {
		width: 100%;
		height: 316px;
		z-index: 1;
	}
	
	.train_swiper img {
		width: 100%;
		height: 316px;
	}
	
	.train_content {
		margin-top: -30px;
		z-index: 2;
		position: relative;
	}
	
	.train_serch {
		display: block;
		width: 691px;
		/*height: 484px;*/
		background: #fff;
		border-radius: 8px;
		margin: 0 auto;
		padding: 0 25px 30px;
	}
	
	.train_city {
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid rgb(233, 233, 233);
		padding: 30px 20px 22px;
	}
	
	.train_depar {
		width: 40%;
	}
	
	.train_icon {
		display: inline-block;
		width: 50px;
		height: 50px;
		background: url("../../../assets/zhuanhuan@2x.png") center no-repeat;
		background-size: 50px;
		margin-top: 30px;
		transition: all 0.5s;
	}
	
	.train_arr {
		width: 40%;
	}
	
	.train_cf {
		color: rgb(168, 168, 168);
		font-size: 26px;
		margin-bottom: 16px;
	}
	
	.train_station {
		color: rgb(51, 51, 51);
		font-size: 34px;
	}
	
	.train_departime {
		color: rgb(168, 168, 168);
		font-size: 24px;
	}
	
	.train_time {
		border-bottom: 2px solid rgb(233, 233, 233);
		padding: 36px 0 33px 35px;
	}
	
	.train_date {
		color: rgb(51, 51, 51);
		margin-left: 34px;
	}
	
	.train_dat {
		font-size: 34px;
	}
	
	.train_day {
		font-size: 22px;
		margin-left: 22px;
	}
	
	.train_rail {
		color: rgb(51, 51, 51);
		font-size: 26px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.train_gt {
		margin-top: 36px;
		margin-bottom: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.train_railem {
		display: inline-block;
		width: 34px;
		height: 34px;
		background-image: url("../../../assets/c.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 34px;
		vertical-align: -3px;
		margin-right: 12px;
	}
	
	.train_railem.active {
		background-image: url("../../../assets/yixuan-lv.png");
	}
	
	.train_submit {
		display: block;
		width: 634px;
		height: 88px;
		margin: 0 auto;
	}
	
	.train_suba {
		display: inline-block;
		width: 634px;
		height: 88px;
		border-radius: 44px;
		color: #fff;
		font-size: 36px;
		background: rgb(59, 195, 194);
		line-height: 88px;
	}
	
	.train_tis {
		width: 100%;
		padding: 0 10px;
		margin: 20px 0;
	}
	
	.train_tisc {
		background: #fffdf0;
		color: #b8845c;
		padding: 10px 20px;
		border-radius: 8px;
		line-height: 40px;
	}
	
	.train_ul {
		width: 100%;
		background: #fff;
		padding: 25px 0 22px;
	}
	
	.train_item {
		width: 25%;
		float: left;
		text-align: center;
	}
	
	.train_name {
		color: #000;
		font-size: 24px;
		margin-top: 19px;
	}
	
	.train_iconq {
		display: inline-block;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	.train_hotel {
		width: 46px;
		height: 44px;
		background-image: url("../../../assets/jiud.png");
		background-size: 46px 44px;
	}
	
	.train_scenic {
		width: 46px;
		height: 44px;
		background-image: url("../../../assets/jingd.png");
		background-size: 46px 44px;
	}
	
	.train_car {
		width: 46px;
		height: 44px;
		background-image: url("../../../assets/qic.png");
		background-size: 46px 44px;
	}
	
	.train_movie {
		width: 46px;
		height: 44px;
		background-image: url("../../../assets/dianying.png");
		background-size: 46px 44px;
	}
	
	.train_city_history {
		padding-top: 30px;
		font-size:22rpx;
		color:rgb(168, 168, 168);
		display: flex;
		justify-content: space-between;
		align-items:center;
	}
	
	.train_city_historyList {
		display: flex;
		justify-content: flex-start;
		width: 80%;
		flex-wrap:wrap;
	}
	
	.train_city_historyList > div {
		margin-right: 20px;
		margin-top: 5px;
		cursor: pointer;
	}
	
</style>
<style>
	body {background: #F4F5F9!important;}
</style>